<template>
  <div class="detail top-page" ref="detailRef">
    <tab-control 
     class="tabs" 
     :titles="names" 
     v-if="showTabControl"
     @tabItemClick="tabClick" 
     ref="tabControlRef"
     />
    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      left-arrow
      @click-left="onClickLeft"
    />
    <div
      class="main"
      v-if="mainPart"
    >
      <detail-swipper :swipe-data="mainPart.topModule.housePicture.housePics" />
      <detail-infos
        name="描述"
        :ref="getSectionRef"
        :top-infos="mainPart.topModule"
      />
      <detail-facility
        name="设施"
        :ref="getSectionRef"
        :house-facility="mainPart.dynamicModule.facilityModule.houseFacility"
      />
      <detail-landlord
        name="房东"
        :ref="getSectionRef"
        :landlord="mainPart.dynamicModule.landlordModule"
      />
      <detail-comment
        name="评论"
        :ref="getSectionRef"
        :comment="mainPart.dynamicModule.commentModule"
      />
      <detail-notice
        name="须知"
        :ref="getSectionRef"
        :order-rules="mainPart.dynamicModule.rulesModule.orderRules"
      />
      <detail-map
        name="周边"
        :ref="getSectionRef"
        :position="mainPart.dynamicModule.positionModule"
      />
      <detail-intro :price-intro="mainPart.introductionModule" />
    </div>
    <div class="footer">
      <img
        src="@/assets/img/detail/icon_ensure.png"
        alt=""
      >
      <div class="text">弘源旅途, 永无止境!</div>
    </div>
    
  </div>
</template>

<script setup>
import DetailSwipper from './cpns/detail_01-swipper.vue'
import DetailInfos from './cpns/detail_02_infos.vue'
import DetailFacility from './cpns/detail_03-facility.vue'
import DetailLandlord from './cpns/detail_04-landlord.vue'
import DetailComment from './cpns/detail_05-comment.vue'
import DetailNotice from './cpns/detail_06-notice.vue'
import DetailMap from './cpns/detail_07_map.vue'
import DetailIntro from './cpns/detail_08_intro.vue'
import TabControl from '@/components/tab-control/tab-control.vue'
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from "vue-router";
import useScroll from '@/hooks/useScroll';

import { getDetailInfos } from '@/services'


const router = useRouter()

const route = useRoute();
const houseId = route.params.id
const detailInfos = ref({})
const mainPart = computed(() => detailInfos.value.mainPart)
getDetailInfos(houseId).then(res => {
  detailInfos.value = res.data
})

const detailRef = ref()


const { scrollTop } = useScroll(detailRef)
const showTabControl = computed(() => {
  return scrollTop.value >= 300
})

// 第一种方式实现
// const sectionEls =[]
// const getSectionRef = (value) => {
//   sectionEls.push(value.$el)
// }

// const tabClick = (index) => {
//   console.log(index,'3')
//   let instance = sectionEls[index].offsetTop
//   if(index != 0) {
//     instance =instance - 44
//   }

//   detailRef.value.scrollTo({
//     top: instance,
//     behavior: "smooth"
//   })
// }


const sectionEls = ref({})
const names = computed(() => {
  return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
  if (!value) return
  const name = value.$el.getAttribute("name")
  sectionEls.value[name] = value.$el
}

let isClick = false
let currentDistance = -1
const tabClick = (index) => {
  const key = Object.keys(sectionEls.value)[index]
  const el = sectionEls.value[key]
  let diatance = el.offsetTop
  if (index !== 0) {
    diatance = diatance - 44
  }
  isClick = true
  currentDistance = diatance

  detailRef.value.scrollTo({
    top: diatance,
    behavior: "smooth"
  })
}

const onClickLeft = () => {
  router.back()
}


const tabControlRef = ref()
// 页面滚动时匹配tabcontrol组件对应的index
watch(scrollTop, (newValue) => {

  // 1.获取所有的区域的offsetTops
  const els = Object.values(sectionEls.value)
  const values = els.map(el => el.offsetTop)

  // 2.根据newValue去匹配想要索引
  let index = values.length - 1
  for (let i = 0; i < values.length; i++) {
    if (values[i] > newValue + 44) {
      index = i - 1
      break
    }
  }

  tabControlRef.value?.setCurrentIndex(index)
})


</script>
<style scoped lang="less">
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>